<script setup>
import myheader from './components/myheader.vue'
import mymain from './components/mymain.vue'
import myfooter from './components/myfooter.vue'
import { ref,computed } from 'vue'

const arrlist = ref([
  { id: 1, name: '跑步', isdo: false, },
  { id: 2, name: '晨练', isdo: false, },
  { id: 3, name: '练书法', isdo: true, },
])
// 添加待办事项的方法
// const addfun = name => {// 生成一个随机id
//   arrlist.value.push({ name, isdo: false, id: Math.floor(Math.random() * 1000) })
// }
// 初始化计数器，使用当前数据中的最大ID值(Math.max() 是 JavaScript 内置函数，用于返回参数中的最大值,map() 是 JavaScript 数组方法，将每个待办事项对象转换为其 id 属性值)
const idCounter = ref(Math.max(0, ...arrlist.value.map(item => item.id)))
const addfun = name => {// 自增计数器并获取新ID
  idCounter.value += 1
  const newId = idCounter.value
  arrlist.value.push({ name, isdo: false, id: newId })// 添加新待办事项，使用自增ID
}
// 删除待办事项的方法
const del = (id) => {// 过滤掉指定id的待办事项 
  arrlist.value = arrlist.value.filter(item => item.id !== id)
}


// 过滤待办事项的计算属性
const len1 = computed(() => {
	// 计算 arrlist 数组中所有 isdo 属性为 false 的元素数量，即未完成的待办事项数量
  const newarr = arrlist.value.filter(item=>{
	  return !item.isdo
  })
  return newarr.length // 返回过滤后的数组长度
})
// 过滤状态，默认为全部
const status = ref('all')
const newarrlist = computed(() => {
	if (status.value == 'all') {
	  return arrlist.value;
	}
	if (status.value == 'active') {
	  return arrlist.value.filter(item => item.isdo == false)
	}
	if (status.value == 'completed') {
	  return arrlist.value.filter(item => item.isdo == true)
	}
})
const upfun1 = (status1) => {
  status.value = status1   // 将子组件的状态赋值给父组件
}
</script>

<template>
  <myheader @additem="addfun"></myheader>
  <mymain :list="newarrlist" @delTodo="del"></mymain>
  <myfooter :len="len1" @upevent="upfun1"></myfooter>
</template>